<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :placeholder="true" />
    <div class="page-main">
      <h1 class="main-title">网站地图</h1>
      <div class="map-box">
        <div class="map-nav-list">
          <div class="map-nav-item" v-for="(item, index) in list" :key="index">
            <div class="map-nav-title">{{ item.title }}</div>
            <div class="map-slist">
              <a :href="nav.url || 'javascript:;'" class="map-snav hv-opacity" v-for="(nav, i) in item.list" :key="i">{{ nav.title }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { hideLoading } from '@/utils/utils'
import { getWebsiteMap } from '@/api/common' 

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

const theme = ref('white')
const list = ref([])

onMounted(() => {
  loadData()
});

const loadData = () => {
  getWebsiteMap().then(res => {
    list.value = res.data
    hideLoading()
  })
};

</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.page-main {
  padding: 6.25rem /* 100/16 */ 0 8.125rem /* 130/16 */;
  // min-height: calc(100vh - 4.375rem /* 70/16 */);
  width: 87.5rem /* 1400/16 */;
  margin: 0 auto;
  max-width: 92%;
}
.main-title {
  text-align: center;
  font-weight: 500;
  color: #000000;
  font-size: 2.625rem /* 42/16 */;
  line-height: 1;
  padding-bottom: 5rem /* 80/16 */;
  border-bottom: 1px solid #F2F2F2;
}
.map-box {
  margin-top: 3.125rem /* 50/16 */;
}
.map-nav-list {
  display: flex;
  justify-content: space-between;
}
.map-nav-item {
  .map-nav-title {
    font-size: 1.125rem /* 18/16 */;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.02em;
  }

}
.map-slist {
  margin-top: 2.1875rem /* 35/16 */;
}
.map-snav {
  font-size: 1rem /* 16/16 */;
  line-height: 2.125rem /* 34/16 */;
  color: #333333;
  display: block;
  letter-spacing: 0.02em;
  &+.map-snav {
    margin-top: 1.25rem /* 20/16 */;
  }
}
</style> 